<template>
	<div class="message">
		<div class="add">
			<img :src="`http://127.0.0.1/api/public/showimg/${img}`"/>
			<textarea required v-model="content"></textarea>
			<button @click="add()">发布</button>
		</div>
		<div class="pl">
			<ul>
				<li v-for="item in list">
					<img :src="`http://127.0.0.1/api/public/showimg/${item.img}`"/>
					<div>
						<div>
							<span>{{item.nickname}}</span>
							<span>{{item.tpost}}</span>
						</div>
						<span class="span">{{item.content}}</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name : 'MobileBookMessage',
		data() {
			return{
				list:[],
				img : '',
				name : '',
				content:'',
				tpost:'',
				rate : 4,
			}
		},
		created() {
			this.$get('/api/public/rate/findByBookid/'+this.$route.params.bookid+'/1/3').then((resp)=>{
				this.list = resp.data.data.comments;
				this.img = this.$store.state.img;
				this.name = this.$store.state.name;
			})
		},
		methods:{
			add(){
				let token = localStorage.getItem('token');
				token = "Bearer " + token;
				let h = {
					headers: {
						'Authorization': token,}}
				let fd = new FormData();
				fd.append('rate',this.rate)
				fd.append('content',this.content)
				this.$postk('/api/public/rate/add/'+this.$route.params.bookid,fd,h).then((rsp)=>{
					this.$get('/api/public/rate/findByBookid/'+this.$route.params.bookid+'/1/3').then((resp)=>{
						this.list = resp.data.data.comments;
						this.content = '';
					})
				})
			}
		}
	}
</script>

<style scoped>
	.message .add{
		border-bottom: 1px solid blue;
		margin: 1rem 2rem 0;
	}
	.message .add img{
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
	}
	.message .add textarea{
		border: none;
		box-shadow: 0px 0px 2px #7c7c7c;
		resize: unset;
		width: 80%;
		height: 3rem;
	}
	.message .add button{
		margin-left: 20rem;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		border: none;
		color: white;
		width: 4rem;
		height: 2rem;
		border-radius: 10%;
		background-color: #409eff;
	}
	.pl{
		margin: 1rem 2rem 0;
	}
	.pl ul li {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		margin-bottom: 1rem;
	}
	.pl ul li div{
		margin-bottom: 0.5rem;
	}
	.pl ul li div span{
		margin-left: 1rem;
	}
	.pl ul li img{
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
	}
</style>